<!--废水登记 sewageDisc-->
<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120">
            <Row v-show="!switchFlag" class="query-form" >
                <Col span="8">
                    <FormItem label="企业名称：" prop="order">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                              :currentOrgId="dataToQuery.companyId" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="登记时间：" prop="content" >
                        <DatePicker class="query-form-el" v-model="dataToQuery.dateRange" format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="请选择查询时间段"
                                    @on-change="onSelectQueryDateRange"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal  title="废水排放监测登记" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"  :width=800 >
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"  :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?160:null">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='企业名称：' prop='companyId'>
                                    <div v-if="mode === 'view'">{{dataToView.companyName}}</div>
                                    <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true" :currentOrgId = "dataToView.companyId" :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}" ></cascader-dom>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='项目/小区名称：' prop='project'>
                                    <div v-if="mode === 'view'">{{dataToView.project}}</div>
                                    <Input v-else type='text' v-model='dataToView.project'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='排放类别：' prop='discType'>
                                    <div v-if="mode === 'view'">{{dataToView.discType}}</div>
                                    <Input v-else type='text' v-model='dataToView.discType'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='采样点：' prop='sampleSite'>
                                    <div v-if="mode === 'view'">{{dataToView.sampleSite}}</div>
                                    <Input v-else v-model='dataToView.sampleSite' class="query-form-el"></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='采样日期：' prop='sampleDate'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.sampleDate)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el" v-model='dataToView.sampleDate'></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>

                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='监测频次：' prop='surveyFrequency'>
                                    <div v-if="mode === 'view'">{{dataToView.surveyFrequency}}</div>
                                    <Input v-else type='text' v-model='dataToView.surveyFrequency'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='排口数量：' prop='outletsNum'>
                                    <div v-if="mode === 'view'">{{dataToView.outletsNum}}</div>
                                    <InputNumber v-else v-model='dataToView.outletsNum' class="query-form-el" :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='有无水处理设施：' prop='hasFacilities'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.hasFacilities)}}</div>
                                    <Select v-else v-model='dataToView.hasFacilities' class='query-form-el'>
                                        <Option  value="1">有</Option >
                                        <Option  value="0">无</Option >
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='设施运行状态：' prop='facilitiesStatus'>
                                    <div v-if="mode === 'view'">{{dataToView.facilitiesStatus}}</div>
                                    <Input v-else type='text' v-model='dataToView.facilitiesStatus'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='有无排水证：' prop='hasPermit'>
                                    <div v-if="mode === 'view'">{{dataToView.hasPermit }}</div>
                                    <Input v-else type='text' v-model='dataToView.hasPermit'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
<!--                                <FormItem label='登记人：' prop='registrant'>-->
<!--                                    <div v-if="mode === 'view'">{{dataToView.registrant}}</div>-->
<!--                                    <Input v-else type='text' v-model='dataToView.registrant'></Input>-->
<!--                                </FormItem>-->
                            </Col>
                        </Row>
<!--                        <Row type="flex" justify="space-around" class="code-row-bg">-->
<!--                            <Col span="11">-->
<!--                                <FormItem label='登记时间：' prop='registTime'>-->
<!--                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.registTime)}}</div>-->
<!--                                    <DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el" v-model='dataToView.registTime'></DatePicker>-->
<!--                                </FormItem>-->
<!--                            </Col>-->
<!--                            <Col span="11"></Col>-->
<!--                        </Row>-->
                        <Row type="flex" justify="space-around" class="code-row-bg" style="margin-top: 10px">
                            <Col span="23">
                                <FormItem label='现场说明：' prop='notes'>
                                    <div v-if="mode === 'view'">{{dataToView.notes}}</div>
                                    <Input v-else type='textarea' v-model='dataToView.notes'></Input>
                                </FormItem>
                            </Col>
                        </Row>

                        <Row type="flex" justify="space-around" class="code-row-bg" style="margin-top: 10px;background-color: transparent">
                            <Col span="23">
                                <div class="padding:10px;">
                                    <div style="margin-top: 10px;margin-bottom: 10px">检测数据：</div>
                                    <table style="width: 100%" class="sewage-item-table">
                                        <thead>
                                            <tr style="">
                                                <th style="width: 20%">检测项</th>
                                                <th style="width: 40%">限值</th>
                                                <th style="width: 40%">检测值</th>
                                            </tr>
                                        </thead>
                                        <tr>
                                            <td><span>PH</span></td>
                                            <td>
                                                <FormItem prop='phLimit' label-width='0'>
                                                    <div v-if="mode === 'view'">{{dataToView.phLimit}}</div>
                                                    <InputNumber v-else v-model='dataToView.phLimit' placeholder="限值" style="width: 95%" :min="0"></InputNumber>
                                                </FormItem>
                                            </td>
                                            <td>
                                                <FormItem prop='phValue' label-width='0'>
                                                    <div v-if="mode === 'view'">{{dataToView.phValue}}</div>
                                                    <InputNumber v-else v-model='dataToView.phValue' placeholder="检测值" style="width: 95%" :min="0"></InputNumber>
                                                </FormItem>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><span>SS(mg/L)</span></td>
                                            <td>
                                                <FormItem prop='ssLimit' label-width='0'>
                                                    <div v-if="mode === 'view'">{{dataToView.ssLimit}}</div>
                                                    <InputNumber v-else v-model='dataToView.ssLimit' placeholder="限值" style="width: 95%" :min="0"></InputNumber>
                                                </FormItem>
                                            </td>
                                            <td>
                                                <FormItem prop='ssValue' label-width='0'>
                                                    <div v-if="mode === 'view'">{{dataToView.ssValue}}</div>
                                                    <InputNumber v-else v-model='dataToView.ssValue' placeholder="检测值" style="width: 95%" :min="0"></InputNumber>
                                                </FormItem>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><span>NH4-N(mg/L)</span></td>
                                            <td>
                                                <FormItem prop='nhLimit' label-width='0'>
                                                    <div v-if="mode === 'view'">{{dataToView.nhLimit}}</div>
                                                    <InputNumber v-else v-model='dataToView.nhLimit' placeholder="限值" style="width: 95%" :min="0"></InputNumber>
                                                </FormItem>
                                            </td>
                                            <td>
                                                <FormItem prop='nhValue' label-width='0'>
                                                    <div v-if="mode === 'view'">{{dataToView.nhValue}}</div>
                                                    <InputNumber v-else v-model='dataToView.nhValue' placeholder="检测值" style="width: 95%" :min="0"></InputNumber>
                                                </FormItem>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><span>COD(mg/L)</span></td>
                                            <td>
                                                <FormItem prop='codLimit' label-width='0'>
                                                    <div v-if="mode === 'view'">{{dataToView.codLimit}}</div>
                                                    <InputNumber v-else v-model='dataToView.codLimit' placeholder="限值" style="width: 95%" :min="0"></InputNumber>
                                                </FormItem>
                                            </td>
                                            <td>
                                                <FormItem prop='codValue' label-width='0'>
                                                    <div v-if="mode === 'view'">{{dataToView.codValue}}</div>
                                                    <InputNumber v-else v-model='dataToView.codValue' placeholder="检测值" style="width: 95%" :min="0"></InputNumber>
                                                </FormItem>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><span>TP(mg/L)</span></td>
                                            <td>
                                                <FormItem prop='tpLimit' label-width='0'>
                                                    <div v-if="mode === 'view'">{{dataToView.tpLimit}}</div>
                                                    <InputNumber v-else v-model='dataToView.tpLimit' placeholder="限值" style="width: 95%" :min="0"></InputNumber>
                                                </FormItem>
                                            </td>
                                            <td>
                                                <FormItem prop='tpValue' label-width='0'>
                                                    <div v-if="mode === 'view'">{{dataToView.tpValue}}</div>
                                                    <InputNumber v-else v-model='dataToView.tpValue' placeholder="检测值" style="width: 95%"></InputNumber>
                                                </FormItem>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><span>动植物油(mg/L)</span></td>
                                            <td>
                                                <FormItem prop='oilsLimit' label-width='0'>
                                                    <div v-if="mode === 'view'">{{dataToView.oilsLimit}}</div>
                                                    <InputNumber v-else v-model='dataToView.oilsLimit' placeholder="限值" style="width: 95%" :min="0"></InputNumber>
                                                </FormItem>
                                            </td>
                                            <td>
                                                <FormItem prop='oilsValue' label-width='0'>
                                                    <div v-if="mode === 'view'">{{dataToView.oilsValue}}</div>
                                                    <InputNumber v-else v-model='dataToView.oilsValue' placeholder="检测值" style="width: 95%" :min="0"></InputNumber>
                                                </FormItem>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><span>LAS(mg/L)</span></td>
                                            <td>
                                                <FormItem prop='lasLimit' label-width='0'>
                                                    <div v-if="mode === 'view'">{{dataToView.lasLimit}}</div>
                                                    <InputNumber v-else v-model='dataToView.lasLimit' placeholder="限值" style="width: 95%" :min="0"></InputNumber>
                                                </FormItem>
                                            </td>
                                            <td>
                                                <FormItem prop='lasValue' label-width='0'>
                                                    <div v-if="mode === 'view'">{{dataToView.lasValue}}</div>
                                                    <InputNumber v-else v-model='dataToView.lasValue' placeholder="检测值" style="width: 95%" :min="0"></InputNumber>
                                                </FormItem>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" class="code-row-bg" v-if="mode != 'view'">
                            <Col span="23" >
                                <FormItem>
                                    <Button type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
                                    <Button type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer" v-if="mode === 'view'">
                <Button class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    import {formatDate} from '@/tools/index'
    import _deepclone from 'lodash/cloneDeep'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    export default {
        components:{
            cascaderDom
        },
        data() {
            return {
                ...this.createCommonDataField(),
                columns1: [
                    { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    { key:'companyName',title: '企业名称',  align: 'center', minWidth: 220 },
                    { key:'project',title: '项目/小区名称',  align: 'center', minWidth: 200 },
                    { key:'discType',title: '排放类别',  align: 'center', width: 100},
                    { key:'sampleSite',title: '采样点',  align: 'center', width: 100 },
                    { key:'sampleDate',title: '采样日期',  align: 'center', width: 100, render: this.renderCellDate },
                    { key:'surveyFrequency',title: '监测频次',  align: 'center', width: 100  },
                    { key:'phValue',title: 'PH',  align: 'center', width: 110 },
                    { key:'phLimit',title: 'PH限值',  align: 'center' , width: 100 },
                    { key:'ssValue',title: 'SS(mg/L)',  align: 'center' , width: 100 },
                    { key:'ssLimit',title: 'SS(mg/L)限值',  align: 'center' , width: 100 },
                    { key:'nhValue',title: 'NH4-N(mg/L)',  align: 'center' , width: 100 },
                    { key:'nhLimit',title: 'NH4-N(mg/L)限值',  align: 'center' , width: 100 },
                    { key:'codValue',title: 'COD(mg/L)',  align: 'center' , width: 100 },
                    { key:'codLimit',title: 'COD(mg/L)限值',  align: 'center' , width: 100 },
                    { key:'tpValue',title: 'TP(mg/L)',  align: 'center' , width: 100 },
                    { key:'tpLimit',title: 'TP(mg/L)限值',  align: 'center' , width: 100 },
                    { key:'oilsValue',title: '动植物油(mg/L)',  align: 'center' , width: 100 },
                    { key:'oilsLimit',title: '动植物油(mg/L)限值',  align: 'center' , width: 100 },
                    { key:'lasValue',title: 'LAS(mg/L)',  align: 'center' , width: 100 },
                    { key:'lasLimit',title: 'LAS(mg/L)限值',  align: 'center' , width: 100 },
                    { key:'outletsNum',title: '排口数量',  align: 'center' , width: 100 },
                    { key:'hasFacilities',title: '有无水处理设施',  align: 'center' , width: 100 },
                    { key:'facilitiesStatus',title: '设施运行状态',  align: 'center' , width: 100 },
                    { key:'hasPermit',title: '有无排水证',  align: 'center' , width: 100 },
                    // { key:'registrant',title: '登记人',  align: 'center', width: 100  },
                    // { key:'registTime',title: '登记时间',  align: 'center', width: 100, render: this.renderCellDate },
                    this.getActionColumns()
                ],
                ruleCustom : {
                    companyId: [ { required: true, message: '请填写企业名称', trigger: 'change' } ],
                    project: [ { required: true, message: '项目/小区名称', trigger: 'change' } ],
                    phValue: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: 'PH必须为数字', trigger: 'change',type:'number'}],
                    phLimit: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: 'PH限值必须为数字', trigger: 'change',type:'number'}],
                    ssValue: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: 'SS(mg/L)必须为数字', trigger: 'change',type:'number'}],
                    ssLimit: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: 'SS(mg/L)限值必须为数字', trigger: 'change',type:'number'}],
                    nhValue: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: 'NH4-N(mg/L)必须为数字', trigger: 'change',type:'number'}],
                    nhLimit: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: 'NH4-N(mg/L)限值必须为数字', trigger: 'change',type:'number'}],
                    codValue: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: 'COD(mg/L)必须为数字', trigger: 'change',type:'number'}],
                    codLimit: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: 'COD(mg/L)限值必须为数字', trigger: 'change',type:'number'}],
                    tpValue: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: 'TP(mg/L)必须为数字', trigger: 'change',type:'number'}],
                    tpLimit: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: 'TP(mg/L)限值必须为数字', trigger: 'change',type:'number'}],
                    oilsValue: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '动植物油(mg/L)必须为数字', trigger: 'change',type:'number'}],
                    oilsLimit: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '动植物油(mg/L)限值必须为数字', trigger: 'change',type:'number'}],
                    lasValue: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: 'LAS(mg/L)必须为数字', trigger: 'change',type:'number'}],
                    lasLimit: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: 'LAS(mg/L)限值必须为数字', trigger: 'change',type:'number'}],
                    outletsNum: [{ pattern: /^(0|[1-9][0-9]*)$/, message: '排口数量必须为数字', trigger: 'change',type:'number'}],
                },
                tableHeight:10,
                // api
                queryUrl:Api.queryWasteSewage,
                deleteUrl:Api.deleteWasteSewage,
                bthDeleteUrl:Api.batchDeleteWasteSewage,
                getUrl:Api.getWasteSewage,
                updateUrl:Api.updateWasteSewage,
                saveUrl:Api.saveWasteSewage,
            }
        },
        mounted() {
             this.setTableHeight();
            this.query();
        },
        methods: {
            ...pageCommonFunction,
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            query() {
                this.queryAjax();
            },
            submit(name) {
                this.submitAjax(name);
            },
            createEmptyDataToAdd() {
                return {
                    phValue:'',
                    phLimit:'',
                    ssValue:'',
                    ssLimit:'',
                    nhValue:'',
                    nhLimit:'',
                    codValue:'',
                    codLimit:'',
                    tpValue:'',
                    tpLimit:'',
                    oilsValue:'',
                    oilsLimit:'',
                    lasValue:'',
                    lasLimit:'',
                    outletsNum:''
                }
            }
        },
        watch: {
        },
    }
</script>

<style lang='css' scoped>
    .sewage-item-table th {
        background-color: #edeef3;
        border: 1px solid #e8eaec;
        height: 32px;
        text-align: center;
        font-weight: 500;
    }

    .sewage-item-table td {
        border: 1px solid #e8eaec;
        height: 32px;
        text-align: center;
        font-weight: 500;
    }
</style>
